<div>
	<h2>HackerU Users Menu</h2>
	<ul>
		<li><a href="<?php echo $this->url();?>" >Home</a></li>
		<li><a class="ajaxMenu"  href="<?php echo $this->url(array('ctrl' => 'users', 'act' => 'lists'));?>" >Users List</a></li>
		<li><a class="ajaxMenu"  href="<?php echo $this->url(array('ctrl' => 'users', 'act' => 'register'));?>" >User Register</a></li>
	</ul>
	<select id="actions" >
		<option value="-1" >-----</option>
		<option value="<?php echo $this->url(array('ctrl' => 'users', 'act' => 'jsonLists'));?>" >Users Lists</option>
		<option value="<?php echo $this->url(array('ctrl' => 'tests', 'act' => 'jsonLists'));?>" >Tests Lists</option>
	</select>
	
	<select id="actionsResults" >
		<option value="-1" >-----</option>
	</select>
</div>
<div id="mainContent"  align="center" ></div>
<script type="text/javascript" >
//will call when document ready
$(function(){
	var $target = $('#mainContent');
	$('a.ajaxMenu').click(function(){
		$.ajax({
			url: this.href,
			success: function(dataFromServer){
				$target.html(dataFromServer);
			}
		});
		return false;
	});

	var $actionsResults = $('#actionsResults'),
	     dataAsHash = {};
	$('#actions').change(function(){
		$.ajax({
			url: this.value,
			dataType: 'json',
			success: function(jsonList){
				var i = 0,
					len = jsonList.length;

				for(; i < len; i++){
					dataAsHash[jsonList[i].id] = jsonList[i];
					$actionsResults.append('<option value="'+jsonList[i].id+'" >'+jsonList[i].firstName+'</option>');
				}
			},
			error: function(jqXHR, textStatus, errorThrown){
			}
		});

		$actionsResults.change(function(){
			$target.html(dataAsHash[this.value].firstName+'---'+dataAsHash[this.value].lastName);
		});
	});
});
</script>